import React from 'react'

function ItemList(props) {
  console.log('itemList组件渲染了')
  const { todoList, toggleItem, clickView, clickEdit, clickDel } = props
  return (
    <div className="itemList">
      {todoList.map(obj => {
        return <div className="item" key={obj.id} >
          <input 
            id={`itemCheckbox` + obj.id} 
            type="checkbox" 
            className="checkbox" 
            checked={obj.completed}
            onChange={() => toggleItem(obj.id)}
          />
          <label
            className="label"
            htmlFor={`itemCheckbox` + obj.id}
            style={{textDecoration: obj.completed ? 'line-through' : 'none'}}
          >
            {obj.title}
          </label>
          <button className="btn view" onClick={() => clickView(obj.id)}>查看</button>
          <button className="btn edit" onClick={() => clickEdit(obj.id)}>编辑</button>
          <button className="btn del" onClick={() => clickDel(obj.id)}>删除</button>
        </div>
      })}
    </div>
  )
}

export default React.memo(ItemList)